<template>
	<view class="items">
		<view class="item" v-for="item,index in lists" :key="index" @tap="toDetail(item)">
			<view class="image">
				<image mode="aspectFill" :src="item.image"></image>
			</view>
			<view class="content">
				<view class="text-item name">
					{{item.brand}} {{item.name}} {{item.color}}
				</view>
				<view class="text-item no">
					{{item.car_no}}
				</view>
				<view class="text-item">
					{{item.staets}} {{item.car_type}} {{item.power_type}} {{item.car_license.join(',')}}
				</view>
			</view>
			<view class="btn">
				<text @tap.stop="toEdit(item)">编辑</text>
			</view>
			<image class="status_tag" mode="widthFix" src="@/static/images/kongxian.png" v-if="item.status == 1"></image>
			<image class="status_tag" mode="widthFix" src="@/static/images/shiyongzhong.png" v-else></image>
		</view>
	</view>
</template>

<script>
	
	export default {
		name:"car_list",
		props: {
			datas: {
				type: Array,
				default: function(){
					return []
				}
			},
		},
		data() {
			return {
				lists: []
			};
		},
		watch: {
			datas: {
				handler(newVal, oldVal) {
					console.log('datas', newVal, oldVal)
					this.lists = newVal
				},
				immediate: true
			},
		},
		methods: {
			toDetail(item){
				uni.setStorageSync('$tempData', item);
				uni.navigateTo({
					url: '/pages/home/carDetail?id='+item.id
				})
			},
			toEdit(item){
				uni.setStorageSync('$tempData', item);
				uni.navigateTo({
					url: '/pages/home/carEdit?id='+item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.items {
		.item {
			display: flex; justify-content: flex-start; background-color: #fff; padding: 24rpx; position: relative;
			.image { 
				width: 250rpx; height: 150rpx;
				image { height: inherit; width: inherit; }
			}
			.content { 
				flex: 1; padding-left: 25rpx;
				.text-item {
					color: #777; font-size: 24rpx;
				}
				.text-item + .text-item {
					padding-top: 10rpx;
				}
				.name {
					font-size: 28rpx; font-weight: 600; color: #333;
				}
				.no {
					
				}
			}
			.btn { display: flex; align-items: flex-end; color: #02a13b; font-size: 26rpx; }
		}
		.item + .item::before {
			content: " ";position: absolute; left: 24rpx; top: 0; width: calc(100% - 48rpx);height: 2rpx; background-color: #ccc;
		}
		.status_tag { position: absolute;right: 24rpx;top: 24rpx; width: 70rpx }
	}
</style>